import React from 'react';
import { Card, Typography, Grid } from '@arco-design/web-react';
import { IconDashboard, IconUser, IconSettings } from '@arco-design/web-react/icon';
import { useTranslation } from 'react-i18next';
import './Home.css';

const { Title, Text } = Typography;
const { Row, Col } = Grid;

const Home: React.FC = () => {
  const { t } = useTranslation();

  return (
    <div className="home-page">
      <div className="hero-section">
        <Title heading={2}>{t('common.welcome')}</Title>
        <Text type="secondary">{t('common.description')}</Text>
      </div>
      
      <Row gutter={20} className="features-section">
        <Col span={8}>
          <Card className="feature-card">
            <div className="feature-icon">
              <IconDashboard />
            </div>
            <Title heading={5}>{t('common.dashboard')}</Title>
            <Text>{t('dashboard.recentActivity')}</Text>
          </Card>
        </Col>
        <Col span={8}>
          <Card className="feature-card">
            <div className="feature-icon">
              <IconUser />
            </div>
            <Title heading={5}>{t('menu.userManagement')}</Title>
            <Text>{t('dashboard.totalUsers')}</Text>
          </Card>
        </Col>
        <Col span={8}>
          <Card className="feature-card">
            <div className="feature-icon">
              <IconSettings />
            </div>
            <Title heading={5}>{t('dashboard.systemHealth')}</Title>
            <Text>{t('dashboard.pendingTasks')}</Text>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Home;